<template>
  <view class="error-container">
    <view class="header">错题管理</view>
    <view class="error-list">
      <view class="error-item" v-for="item in pagedData" :key="item.id" @click="goToWrongExercise(item)">
        <view class="question">{{ item.question }}</view>
        <view class="meta-row">
          <view class="meta">最后答题时间: {{ item.lastAnswerTime }}</view>
          <button class="delete-btn" @click.stop="deleteError(item.id)">删除</button>
        </view>
      </view>
    </view>
    <view class="pagination-bar">
      <nut-pagination
        v-model="currentPage"
        :page-count="totalPages"
        mode="simple"
        @change="onPageChange"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import config from '../../config'

const pageSize = 10
const currentPage = ref(1)
const errorList = ref([])
const userId = ref(null);
const currentQuestion = ref(0)
const questionList = ref([]) // 你的题目数组
const jumpQuestionId = ref(null)
// errorList.value = mock
function fetchErrors() {
  Taro.request({ 
    url: `${config.apiUrl}/userAnswer/wrong/data/${userId.value}`,
    method: 'GET',
    success: (res) => {
      errorList.value = res.data.data.list
      totalPages.value = res.data.data.total
    },
    fail: (err) => {
      console.log(err)
    }
  })
}

onMounted(() => {
  userId.value = Taro.getStorageSync('id');
  if (userId.value == null) {
    return Taro.navigateTo({
      url: '/pages/profile/index'
    })
  }
  const params = Taro.getCurrentInstance().router.params
  if (params && params.type === 'all') {
    if (params && params.questionId) {
      jumpQuestionId.value = params.questionId
    }
    fetchWrongQuestions().then(list => {
      questionList.value = list
      updateQuestionData()
      jumpToQuestionById()
    })
  } else if (params && params.type) {
    // ... 其他类型
  } else {
    // eventChannel 方式
    // ...
  }
  fetchErrors()
})

const totalPages = computed(() => Math.ceil(errorList.value.length / pageSize))
const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return errorList.value.slice(start, start + pageSize)
})

function onPageChange(val) {
  currentPage.value = val
}

function deleteError(id) {
  Taro.request({ 
    url: `${config.apiUrl}/userAnswer/deleteWrong/${id}/${userId.value}`,
    method: 'DELETE',
    success: (res) => {
      if (res.data.code === '0') {
        Taro.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000,
        })
        fetchErrors()
      } else {
        Taro.showToast({
          title: '删除失败',
          icon: 'error',
        })
      }
    }
  })
}

function goToWrongExercise(item) {
  // 跳转并传递题目id
  Taro.navigateTo({
    url: '/pages/worng/exercise?questionId=' + item.id
  })
}
</script>

<style lang="scss">
.error-container {
  background: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  padding: 32rpx 0 16rpx 0;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.error-list {
  flex: 1;
  padding: 0 0 20rpx 0;
}
.error-item {
  background: #fff;
  margin: 0 0 18rpx 0;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  padding: 24rpx 24rpx 12rpx 24rpx;
}
.question {
  font-size: 28rpx;
  color: #222;
  margin-bottom: 18rpx;
  font-weight: 500;
}
.meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32rpx;
}
.meta {
  font-size: 24rpx;
  color: #888;
}
.delete-btn {
  margin-left: auto;
  background: #e60000;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 8rpx 32rpx;
  font-size: 23rpx;
}
.pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 16rpx 0 32rpx 0;
  border-top: 1px solid #eee;
}
</style> 